<template>
  <div class="col-sm-12">
    <div class="form-horizontal">
      <div class="site-bgcolor">
        <br>
        <div class="form-group">
          <label for="titleAdd" class="col-sm-2 control-label">title</label>

          <div class="col-sm-4">
            <input class="form-control" id="titleAdd" name="titleAdd"
                   v-model="item.caption">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">内容</label>
          <textarea class="form-control" id="container" style="width: 380px; height: 252px;" name="content"> 这里写你的初始化内容123</textarea>
        </div>

        <div class="form-group">
          <div class="col-sm-3 col-md-push-9">
            <button class="btn btn-default" v-on:click="onCancelClick()">取消</button>
            <button class="btn btn-default" v-on:click="onSubmitClick(file)">提交</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<style>
  .site-bgcolor {
    background: AliceBlue
  }
</style>
<script>
  /*  import UE from 'ueditor'
   UE.getEditor('container')*/
  // import UM from 'umeditor'
  import jQuery from 'jquery'
  export default {
    name: 'itemEdit',
    data: function () {
      return {
        uuid: ''
      }
    },
    props: ['item', 'mode', 'url'],
    components: {},
    methods: {
      onCancelClick: function () {
        this.$dispatch('component', 'modeList')
      },
      onSubmitClick: function () {
        var formData = new window.FormData(document.forms.namedItem('uploadForm'))
        if (this.mode === 'modeAddNew') {
          this.$http.post(this.url, this.item).then(function (response) {
            this.uuid = response.data.uuid
            console.log(this.uuid)
            var suffix = response.data.originname.substring(response.data.originname.lastIndexOf('.') + 1)
            formData.append('name', response.data.uuid + '.' + suffix)
            formData.append('file', document.forms.namedItem('uploadForm'))
            this.upload(formData)
            this.$dispatch('finditem')
            this.$dispatch('component', 'modeList')
            window.alert('提交成功 ')
            this.item = {}
          }, function (response) {
            window.alert('failed to save,Probably failed to connect the backend server! Pls check your server status! ')
          })
        } else {
          this.$http.put(this.url + this.item.id, this.item).then(function (response) {
            window.alert('修改成功 ')
            this.$dispatch('component', 'modeList')
          }, function (response) {
            this.$dispatch('finditem')
            window.alert('failed to update,Probably failed to connect the backend server! Pls check your server status! ')
          })
        }
      },
      upload: function (formData) {
        this.$http.post('http://euvee.vicp.co/rest/file', formData).then(function (response) {
        }, function (response) {
          window.alert('文件提交失败! 状态码：' + response.status)
        })
      },
      editor: function () {
        jQuery(function () {
          var editor = UM.getEditor('myEditor', {
            //初始就是全屏状态
            fullscreen: true,
            //设置toolbar不占位
            withoutToolbar: true,
            //去掉全屏按钮
            toolbar: (function () {
              var toolbar = UMEDITOR_CONFIG.toolbar;
              $.each(toolbar, function (k, v) {
                toolbar[k] = v.replace('fullscreen', '');
              });
              return toolbar;
            })()
          });
          window.um = editor;
          //对编辑器的操作要放在ready后才能生效
          editor.ready(function () {
            var $toolbar = $(".edui-toolbar", editor.container), timer;
            $toolbar.animate({top: -100}, 500);
            $(editor.body).on("mousedown", function (evt) {
              $toolbar.animate({
                top: 0
              }, 500);
            }).on('scroll', function (evt) {
              clearTimeout(timer);
              timer = setTimeout(function () {
                $toolbar.stop().animate({
                  top: -100
                }, 500);
              }, 50)
            })
          });
        });
      }
    },
    read: function () {
      this.editor()
    }
  }
</script>
